<template>
  <div class="app-container">
    <el-card>
      <el-form ref="conditionForm" :model="conditionForm" label-width="80px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="用户名">
              <el-input v-model="conditionForm.username" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="姓名">
              <el-input v-model="conditionForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-form-item label="年龄">
              <el-select v-model="conditionForm.age" placeholder="请选择" clearable>
                <el-option
                  v-for="item in ageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="性别">
              <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="checkboxAll" @change="handleCheckAllChange">全选</el-checkbox>
              <el-checkbox-group v-model="conditionForm.sex" class="checkbox" @change="handleCheckedSexsChange">
                <el-checkbox v-for="sex in sexs" :key="sex" :label="sex">{{ sex }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="出生日期">
              <el-date-picker v-model="conditionForm.birthdayStart" type="date" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="——">
              <el-date-picker v-model="conditionForm.birthdayEnd" type="date" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-form-item label="创建日期">
              <el-date-picker v-model="conditionForm.createtimeStart" type="date" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="——">
              <el-date-picker v-model="conditionForm.createtimeEnd" type="date" style="width: 100%; " format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-button icon="el-icon-search" type="primary" round @click="searchByConditionClick">查询</el-button>
            <el-button icon="el-icon-refresh-left" type="info" round @click="resetSearchForm">重置</el-button>
            <el-button icon="el-icon-edit" type="success" round @click="addDialog">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table
        v-loading="listLoading"
        :data="userList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号" width="95">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username" align="center">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="name" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" prop="age" align="center">
          <template slot-scope="scope">
            {{ scope.row.age }}
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex" align="center">
          <template slot-scope="scope">
            {{ scope.row.sex }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="birthday" label="生日">
          <template slot-scope="scope">
            <span>{{ scope.row.birthday | FormatDate('yyyy-MM-dd') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createtime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createtime | FormatDate('yyyy-MM-dd') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="total"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="再次确认密码">
          <el-input v-model="form.password1" placeholder="请再次输入密码" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="form.age" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="form.birthday" type="date" placeholder="请选择出生日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.note" type="textarea" />
        </el-form-item>
      </el-form>
      <el-button v-if="operatingType === 'add'" type="primary" @click="addUser">添加</el-button>
      <el-button v-else-if="operatingType === 'edit'" type="primary" @click="editUser">修改</el-button>
      <el-button @click="onCancel">关闭</el-button>
    </el-dialog>
    <!--    <audio id="audio" muted autoplay src="../../assets/music/young.mp3" />-->
  </div>
</template>

<script>
import { FormatDate } from '../../filters/index'
const sexOptions = ['男', '女']
export default {
  filters: {
    FormatDate
  },
  data() {
    return {
      userList: [{ id: '61be8ba85fb6486890f4a105435c7135', username: 'WYH帅逼', password: '123456', name: '王一行', age: 23, sex: '男', birthday: 'Sun May 03 00:00:00 CST 2020', createtime: 'Wed May 06 15:41:26 CST 2020', note: '100' }],
      currentPage: 1,
      pageSize: 10,
      total: 100,
      listLoading: true,
      dialogVisible: false,
      operatingType: '',
      checkAll: true,
      isIndeterminate: false,
      sexs: sexOptions,
      ageOptions: [
        {
          value: 1,
          label: '1-10'
        }, {
          value: 2,
          label: '11-20'
        }, {
          value: 3,
          label: '21-30'
        }, {
          value: 4,
          label: '31-40'
        }, {
          value: 5,
          label: '41-50'
        }, {
          value: 6,
          label: '51-60'
        }, {
          value: 7,
          label: '61-70'
        }, {
          value: 8,
          label: '71-80'
        }, {
          value: 9,
          label: '81-90'
        }, {
          value: 10,
          label: '91-100'
        }],
      conditionForm: {
        username: '',
        name: '',
        age: '',
        sex: ['男', '女'],
        birthdayStart: '',
        birthdayEnd: '',
        createtimeStart: '',
        createtimeEnd: ''
      },
      form: {
        id: '',
        username: '',
        password: '',
        password1: '',
        name: '',
        age: 1,
        sex: '男',
        birthday: '',
        note: ''
      }
    }
  },
  created() {

  },
  mounted() {
    this.initList()
  },
  methods: {
    // 加载用户数据表格
    async initList() {
      this.listLoading = true
      const [error, data] = await this.$req('findAll', 'get', {
        pageNum: this.currentPage,
        pageSize: this.pageSize

      })
      if (error) {
        console.log(error)
        return
      }
      this.userList = data.list
      this.total = data.total
      this.listLoading = false
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.searchByCondition()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchByCondition()
    },
    edit(row) {
      this.editDialog()
      this.form.id = row.id
      this.form.username = row.username
      this.form.password = row.password
      this.form.password1 = row.password
      this.form.name = row.name
      this.form.age = row.age
      this.form.sex = row.sex
      this.form.birthday = row.birthday
      this.form.note = row.note
    },
    async editUser() {
      var that = this
      console.log(that)
      const [error, data] = await this.$req('updateById', 'post', {
        id: that.form.id,
        username: that.form.username,
        password: that.form.password,
        name: that.form.name,
        age: that.form.age,
        sex: that.form.sex,
        birthdayStr: that.form.birthday,
        note: that.form.note
      })
      if (error) {
        console.log(error)
        return
      }
      console.log(data)
      if (data) {
        this.$message.success('修改成功')
      } else {
        this.$message.error('修改失败')
      }
      this.initList()
      this.form = {
        age: 1,
        sex: '男'
      }
      this.dialogVisible = false
    },
    async deleteUser(id) {
      const [error, data] = await this.$req('remove', 'get', {
        id: id
      })
      if (error) {
        console.log(error)
        return
      }
      console.log(data)
      if (data) {
        this.$message.success('删除成功')
      } else {
        this.$message.error('删除失败')
      }
      this.initList()
    },
    async addUser() {
      var that = this
      console.log(that)
      const [error, data] = await this.$req('addUser', 'post', {
        username: that.form.username,
        password: that.form.password,
        name: that.form.name,
        age: that.form.age,
        sex: that.form.sex,
        birthdayStr: that.form.birthday,
        note: that.form.note
      })
      if (error) {
        console.log(error)
        return
      }
      console.log(data)
      if (data) {
        this.$message.success('添加成功')
        this.initList()
      } else {
        this.$message.error('添加失败')
      }
      this.form = {
        age: 1,
        sex: '男'
      }
      this.dialogVisible = false
    },
    addDialog() {
      this.operatingType = 'add'
      this.dialogVisible = true
    },
    editDialog() {
      this.operatingType = 'edit'
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.form = { age: 1,
            sex: '男' }
          done()
        })
        .catch(_ => {})
    },
    onCancel() {
      this.form = { age: 1,
        sex: '男' }
      this.dialogVisible = false
      this.$message({
        message: '取消操作',
        type: 'warning'
      })
    },
    handleCheckAllChange(val) {
      this.conditionForm.sex = val ? sexOptions : []
      this.isIndeterminate = false
    },
    handleCheckedSexsChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.sexs.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.sexs.length
    },
    resetSearchForm() {
      this.conditionForm = {
        username: '',
        name: '',
        age: '',
        sex: ['男', '女'],
        birthdayStart: '',
        birthdayEnd: '',
        createtimeStart: '',
        createtimeEnd: ''
      }
    },
    searchByConditionClick() {
      this.currentPage = 1
      this.searchByCondition()
    },
    async searchByCondition() {
      this.listLoading = true
      console.log(this)
      var sex = ''
      var size = this.conditionForm.sex.length
      if (size === 0) {
        this.$message.error('请至少选择一种性别')
        return
      } else if (size === 1) {
        sex = this.conditionForm.sex[0]
      }
      console.log(sex)
      const [error, data] = await this.$req('findByCondition', 'post', {
        username: this.conditionForm.username,
        name: this.conditionForm.name,
        age: this.conditionForm.age,
        sex: sex,
        birthdayStartStr: this.conditionForm.birthdayStart,
        birthdayEndStr: this.conditionForm.birthdayEnd,
        createtimeStartStr: this.conditionForm.createtimeStart,
        createtimeEndStr: this.conditionForm.createtimeEnd,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      })
      if (error) {
        console.log(error)
        return
      }
      console.log(data)
      this.userList = data.list
      this.total = data.total
      this.listLoading = false
    }
  }
}
</script>
<style lang="sass">

  .checkboxAll
    width: 80px
    float: left

  .checkbox
    width: 150px
    float: left

  .el-form-item__label
    text-align: center

  .el-pagination
    float: right
</style>
